<template>
    <div>
        <div class="tabs">
            <div :class="{active: isMy === '01'}" @click="changeIsMy('01')"> 
                <p>{{total.myAddCnt}}</p> <span>我加的</span> 
            </div>
            <div :class="{active: isMy === '00'}" @click="changeIsMy('00')"> 
                <p>{{total.addMyCnt}}</p> <span>加我的</span> 
            </div>
        </div>
        <div class="sub_tabs_c">
            <div class="sub_tabs">
                <p :class="{active: addStatusStr == '01'}" @click="changeStatus('01')">
                    已通过({{ isMy == '01' ? total.myAddTgCnt : total.addMyTgCnt }})
                </p>
                <p :class="{active: addStatusStr == '00'}" @click="changeStatus('00')">
                    未通过({{ isMy == '01' ? total.myAddNoTgCnt : total.addMyNoTgCnt }})
                </p>
            </div>
        </div>
        <div class="list">
            <div class="item" v-for="(item, index) in list" :key="index">
                <relationshipItem @refresh="refreshList" :item="item" myFriend />
                <div v-if="addStatusStr == '00'" class="tip flex-v-center">
                    <i class="icon-comment mar-r10"></i>
                    我对你的生意感兴趣，可以聊一下么
                </div>
            </div>
            <div class="empty" v-if="scroll.noData">
                <i class="icon-empty"></i>
                <p>你的人脉太少了，怎么赚大钱？</p>
                <span @click="$navigate.to('/pages/relationship/index')">去添加</span>
            </div>
            <pub-list-end v-else :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>
    </div>
</template>

<script>
import relationshipItem from '@/components/pages/relationshipItem'
import { getAddtionUsers, getAddtionUsersCnt } from '@/request/relationship'
export default {
    components: { relationshipItem },
    data() {
        return {
            total: {
                addMyCnt: 1,
                addMyNoTgCnt: 1,
                addMyTgCnt: 0,
                myAddCnt: 5,
                myAddNoTgCnt: 5,
                myAddTgCnt: 0,
            },
            isMy: '01', // 01加我的，00我加的
            addStatusStr: '01', //00 申请中，01已通过
            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },

        }
    },
    onLoad(options) {
        this.onRefresh()
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        getTotal() {
            getAddtionUsersCnt().then(res => {
                this.total = res.data
                // this.total.myAddCnt,
                // this.total.addMyCnt,
                // this.total.myAddTgCnt,
                // this.total.myAddNoTgCnt
            })
        },
        changeIsMy(isMy) {
            this.isMy = isMy
            this.addStatusStr = '01'
            this.onRefresh()
        },
        changeStatus(addStatusStr) {
            this.addStatusStr = addStatusStr
            this.onRefresh()
        },
        getList(complete) {
            this.getTotal()
            getAddtionUsers({
                addStatusStr: this.addStatusStr,
                isMy: this.isMy,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = this.list.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        refreshList(state) {
            // state 00删除，01 添加，02拒绝
            this.onRefresh()
        }

    }
}
</script>

<style lang="less" scoped>
.tabs{
    width: 100%;
    background: #fff;
    display: flex;
    height: 160rpx;
    border-bottom: 1rpx solid #eee;
    >div{
        flex: 1;
        position: relative;
        padding-bottom: 10rpx;
        &:first-child::before {
            content: "";
            width: 1rpx;
            height: 50rpx;
            background: #eee;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        &.active{
            &::after{
                content: "";
                width: 120rpx;
                height: 8rpx;
                border-radius: 40rpx 40rpx 0 0;
                background: @mainColor;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
            }
        }
        .align(center, column);
        p{
            font-size: 40rpx;
            font-weight: bold;
        }
        span{
            color: #999;
            font-size: 26rpx;
            margin-top: 10rpx;
        }
    }
}
.sub_tabs_c{
    width: 100%;
    background: #fff;
    padding: 20rpx 0;
    .align(center);
    .sub_tabs{
        width: 690rpx;
        height: 80rpx;
        display: flex;
        border-radius: 10rpx;
        background: #f2f2f2;
        display: flex;
        padding: 10rpx;
        p{
            flex: 1;
            height: 100%;
            margin-right: 10rpx;
            border-radius: 6rpx;
            font-size: 28rpx;
            .align(center);
            &.active{
                background: #fff;
            }

        }
    }
}
.list{
    .item{
        padding: 30rpx;
        width: 100%;
        background-color: #fff;
        margin-bottom: 20rpx;
        .tip{
            width: 100%;
            height: 70rpx;
            padding: 0 20rpx;
            background: #f3f8fe;
            border-radius: 10rpx;
            font-size: 26rpx;
            color: #666;
            margin-top: 20rpx;
        }
    }
    .empty{
        width: 100%;
        background: #fff;
        height: 600rpx;
        padding-top: 60rpx;
        .align(center, column);
        i{
            font-size: 150rpx;
            color: #ccc;
        }
        p{
            font-size: 44rpx;
            font-weight: bold;
            margin: 30rpx 0;
            color: #333;
        }
        span{
            width: 460rpx;
            height: 90rpx;
            border-radius: 50rpx;
            border: 1px solid @mainColor;
            margin-top: 30rpx;
            color: @mainColor;
            font-size: 40rpx;
            .align(center);
        }
    }
}

</style>